<template>
<div class="idLayout">
    <div class="tagsBox">
        <div>
            <span class="title">评论</span>
            <el-select
                v-model="tagsValue.score"
                >
                <el-option label="好评" :value="true" />
                <el-option label="差评" :value="false" />
            </el-select>
        </div>
        <div>
            <span class="title">创建时间</span>
            <el-config-provider :locale="zhCn">
                <el-date-picker
                    v-model="tagsValue.time"
                    type="daterange"
                    range-separator="To"
                    start-placeholder="Start"
                    end-placeholder="End"
                    size="default"
                />
            </el-config-provider>
        </div>

        <div class="btn">
            <el-button type="primary" style="width:100%" @click="query">查询</el-button>
            <el-button type="primary" style="width:100%" @click="clear">清空查询</el-button>
        </div>

    </div>

    <el-card style="width:100%">
        <el-table
            ref="multipleTableRef"
            :data="tableData"
            style="width: 100%;border: none; border-radius: 8px"
            v-loading="loading" 
            element-loading-text="loading..." 
            element-loading-background="white"
        >
            <el-table-column property="user_name" label="用户" />
            <el-table-column property="user_code" label="手机号" />
            <el-table-column property="score" label="评分" />
            <el-table-column property="room_name" label="客房名称" />
            <el-table-column property="hasReply" label="回复状态" >
                <template #default="scope">
                    <el-tag
                        :type="scope.row.hasReply?'success':'danger'"
                        disable-transitions
                    >{{ scope.row.hasReply?'已回复':'未回复' }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column property="create_time" label="评论时间">
                <template #default="scope">
                    <span>{{ formatYMD(scope.row.create_time) }}</span>
                </template>
            </el-table-column>
            <el-table-column property="content" label="评论内容" :show-overflow-tooltip="true"/>
            <el-table-column label="操作" width="220">
                <template #default="scope">
                    <el-button @click="updataInfo(scope.row)" v-if="!scope.row.hasReply">回复</el-button>
                    <el-button @click="lookComment(scope.row)" type="success" v-else>查看回复内容</el-button>
                </template>
            </el-table-column>
            <template #empty>
                    <el-empty description="无数据" />
                </template>
        </el-table>
    </el-card>

    <el-card class="pagination" body-style="padding:0">
        <el-config-provider :locale="zhCn">
            <el-pagination  :page-size="10" 
                            @current-change="changePage"
                            layout="prev, pager, next, jumper" 
                            background 
                            :total="total"
                            prev-text="上一页"
                            next-text="下一页"
                            />
        </el-config-provider>
    </el-card>
</div> 
<el-dialog v-model="dialog" title="商家回复">
    <el-input
        v-model="hotelVal"
        maxlength="200"
        placeholder="请输入回复"
        :rows="2"
        :disabled="userInfo.hasReply"
        show-word-limit
        type="textarea"
    />
    <el-button type="primary" class="btnOnsum" @click="onHotelSum" v-if="!userInfo.hasReply">提交</el-button>
</el-dialog>
</template>

<script lang="ts" setup>
import { reactive, onBeforeMount, ref } from 'vue'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import { get } from '@/http/axios' 
import { getCookies } from '@/utils/cookies'
import { useUserInfoStore } from '@/store/userInfoState'
import { ElMessage } from 'element-plus'
import { formatYMD } from '@/utils/format'

let tableData = ref()
const tagsValue = reactive({
    score: null,
    time: null
})
let id = ref<number | string>()
const store = useUserInfoStore()
let loading = ref<boolean>(true)
let total = ref<number>(0)
let dialog = ref<boolean>(false)
let hotelVal = ref<string>()
let userInfo = ref()
onBeforeMount(() => {
    id.value = store.user?.id?store.user.id:getCookies('id')
    initData()
})
function initData(pageNum: number = 1) {
    get('/review/queryPage',{
        hotel_id: id.value,
        score:tagsValue.score,
        start_time: tagsValue.time?new Date(tagsValue.time[0]).getTime():0,
        end_time: tagsValue.time?new Date(tagsValue.time[1]).getTime():0,
        pageNum,
        pageSize: 10,
    }).then(res => {
        let timer = setTimeout(() => {
            clearTimeout(timer)
            tableData.value = res.result.content
            total.value = res.result.totalCount
            loading.value = false
        },500)
    }).catch(err => {
        ElMessage.error('评论信息加载失败' + err)
    })
}
function query() {
    loading.value = true
    initData()
}
function clear(){
    tagsValue.score = ''
}
function changePage(val:number){
    loading.value = true
    initData(val)
}
function updataInfo(val:any) {
    hotelVal.value = ''
    dialog.value = true
    userInfo.value = val
}
function onHotelSum(){
    get('/review/addReply',{
        review_id: userInfo.value.id,
        reply: hotelVal.value
    }).then(res => {
        if (res.result) {
            ElMessage.success('回复成功')
            dialog.value = false
            initData()
        }
    }).catch(err => {
        ElMessage.error('回复失败' + err)
    })
}
function lookComment(val:any) {
    dialog.value = true
    userInfo.value = val
    hotelVal.value = val.reply
}
</script>

<style lang="scss" scoped>
@import url(../../assets/css/infoKinds.scss);
@import url(../../assets/css/changePagintoin.scss);
.idLayout{
    width: 100%;
    @include flexColumnCenter;
    gap: 2px;
    @include allBack;
}
.paginationBox{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 0;
    border-radius: 8px;
}
.btn{
    width: 350px !important;
}
.btnOnsum{
    width: 200px;
    margin-top: 30px;
}
</style>